<template>
  <div id="Register">
    <ul>
      <li><input type="text" placeholder="请输入账号" v-model="user.userid"></li>
      <li><input type="password" placeholder="请输入密码" v-model="user.userword"></li>
      <li> <button v-text="myuser.text" @click="goto"></button></li>
    </ul>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  name: 'Register',
  data () {
    return {
      user: {
        userid: '',
        userword: ''
      },
      myuser: {
        text: '登录',
        urlOk: '/My',
        urlNo: '/Enter'
      }
    }
  },
  mounted () {
    this.getdata()
  },
  methods: {
    getdata () {
      this.users = JSON.parse(localStorage.getItem('users'))
      console.log(this.users)
    },
    goto () {
      if (JSON.parse(localStorage.getItem('users'))) {
        if (this.user.userid === this.users.userid && this.user.userword === this.users.userword) {
          localStorage.setItem('user', JSON.stringify(this.user))
          Toast('登录成功')
          this.$router.push({ path: this.myuser.urlOk })
        } else {
          Toast('账号密码不正确')
        }
      } else {
        Toast('请先注册')
        this.$router.push({ path: this.myuser.urlNo })
      }
    }
  }
}
</script>

<style scoped lang="less">
#Register {
  width: 80%;
  margin: 50px auto;
  padding: 20px 0;
  background: rgba(255, 255, 255, 1);
  ul {
    padding: 25px 10%;
    li {
      text-align: center;
      input {
        height: 60px;
        font-size: 28px;
      }
      button {
        padding: 0 50px;
        font-size: 28px /*px*/;
        background: rgba(255, 0, 0, 1);
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
